<template>
	<el-card class="box-card">
		<el-button type="primary" :disabled="three === ''" @click="addBrand">添加属性+</el-button>
		<el-table :data="tableData" style="width: 100%" :border="true" v-loading="loading">
			<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
			<el-table-column prop="attrName" label="属性名称" width="200">
				<template slot-scope="{ row }">
					<span v-if="row.attrName">{{ row.attrName }}</span>
					<el-input
						v-else
						v-model="brandAttr"
						placeholder="请输入属性名"
						@blur="changBrandAttr(row.id)"
						@keyup.enter.native="changBrandAttr(row.id)"
						size="small"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="属性值列表" width="width">
				<template slot-scope="{ row }">
					<el-tag
						type="success"
						v-for="item in row.attrValueList"
						:key="item.id"
						closable
						@close="handleClose(row, item.id)">
						{{ item.valueName }}
					</el-tag>
					<el-input
						size="small"
						v-if="row.isShowInput"
						:ref="row.id"
						v-model="inputValue"
						@blur="handleInputConfirm(row.id)"
						@keyup.enter.native="handleInputConfirm(row.id)"
						class="input-new-tag">
					</el-input>
					<el-button v-else size="small" @click="handlerInput(row.id)" class="button-new-tag">
						添加属性+
					</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="width">
				<template slot-scope="{ row }">
					<el-button type="danger" @click="remove(row.id)">删除</el-button>
					<el-button type="primary" v-if="row.isShowSave" @click="save(row)">保存</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
import { saveAttrInfo } from '@/api/product';
export default {
	name: 'Attr',
	data() {
		return {
			inputValue: '',
			brandAttr: '',
		};
	},
	props: ['tableData', 'loading', 'three'],
	methods: {
		remove(id) {
			this.$message({
				type: 'info',
				message: '暂不支持删除操作，持续更新中...',
			});
		},
		// 删除某一标签
		handleClose(val, id) {
			val.attrValueList.forEach(e => {
				if (e.id === id) {
					this.$emit('deleteAttr', val.id, id);
				}
			});
		},
		// 保存修改
		save(val) {
			saveAttrInfo(val).then(
				resolve => {
					this.$message({
						message: '修改成功！',
						type: 'success',
					});
					this.$emit('saveAttr', val.id);
				},
				reject => {
					this.$message({
						message: '修改失败，请稍后再试！',
						type: 'error',
					});
				}
			);
		},
		// 显示输入框
		handlerInput(id) {
			this.$emit('showInput', id, true);
			this.$nextTick(() => {
				this.$refs[id].$refs.input.focus();
			});
		},
		// 失去焦点添加属性
		handleInputConfirm(id) {
			this.$emit('showInput', id, false);
			let inputValue = this.inputValue;
			if (inputValue) {
				this.$emit('addAttr', id, inputValue);
			}
			this.inputValue = '';
		},
		// 显示添加品牌输入框
		addBrand() {
			this.$emit('addBrandAttr');
		},
		// 添加品牌
		changBrandAttr(id) {
			let brandAttr = this.brandAttr;
			if (brandAttr) {
				this.$emit('changData', id, this.brandAttr);
			}
			this.brandAttr = '';
		},
	},
	beforeDestroy() {
		this.$off();
	},
};
</script>

<style>
.el-tag {
	margin: 5px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
}
</style>
